<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .cir1{
        fill: darkgoldenrod;
        transition: all 2s;
        cx:100;
        cy:100;
        r:50;
        transition: all 2s linear initial;
      }
      .cir1::hover{
        fill:green; 
        r:30; 
      }
      .line1{
          animation: xuanzhuan 5s linear infinite;
      }
      @keyframes xuanzhuan {
          from{
             transform-origin: center;
             transform: rotate(0deg);
            
          }
          to{
            transform: rotate(360deg);
            transform-origin: center;
          }
      }


    </style>
</head>
<body>

    <svg height="300" width="300" >
       <circle   class="cir1" ></circle>
       <line class="line1" x1="0" y1="0" x2="200" y2="200"
       style="stroke:rgb(255,0,0);stroke-width:2"/>
      </svg>



      <script>
        let circle = document.querySelector(".cir1")

        document.querySelector("[pid='10']")
      </script>
</body>
</html>